<template>
  <div class="page">
    <el-row>
      <el-col :span="24">
        <el-form
          :model="formData"
          ref="queryForm"
          :inline="true"
          label-width="68px"
          class="pageForm"
        >
          <el-form-item class="datepickerForm">
            <el-input
              v-model="formData.username"
              placeholder="请输入客户号"
              clearable
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item prop="tableSubjectDomain">
            <el-input
              v-model="formData.username"
              placeholder="请输入保单号"
              clearable
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="formData.type"
              placeholder="请选择险种"
              clearable
              size="small"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formData.username"
              placeholder="请输入起保客户姓名"
              clearable
              size="small"
            ></el-input> </el-form-item
          ><el-form-item>
            <el-select
              v-model="formData.type"
              placeholder="请选择证件类型"
              clearable
              size="small"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formData.username"
              placeholder="请输入证件号码"
              clearable
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="formData.type"
              placeholder="请选择是否精准匹配"
              clearable
              size="small"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="searchForm"
              >搜索</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="mini"
              @click="resetForm"
              >重置</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-upload2"
              size="mini"
              :loading="exportLoading"
              @click="handleExport"
              class="buttonBottom"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <component-table :data="tableData" class="table-data">
      <template v-slot:button="{ scope }">
        <template>
          <el-button type="primary" size="mini" @click="handButton(scope.row)"
            >操作栏</el-button
          >
        </template>
      </template>
    </component-table>
  </div>
</template>

<script>
import IndexJs from './index.js'
export default IndexJs
</script>


<style lang="css" scoped>
.buttonBottom {
  margin-bottom: 10px;
}
.table-data /deep/ thead th {
  background-color: rgb(51, 65, 87) !important;
  color: white;
  text-align: center;
}
</style>
<style>
.page .el-table td,
.el-table th {
  padding: 8px 0;
}
.page .el-form-item {
  margin-bottom: 12px !important;
}
div.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.3);
}
.popContainer .popContainerNext {
  position: absolute;
  top: 170px;
  left: 820px;
  text-align: center;
}
.popContainer .popContainerSure {
  position: absolute;
  top: 170px;
  left: 1000px;
  text-align: center;
}
.popContainer .popContainertext {
  margin: 10px 0 20px;
  color: #409eff;
}
.popContainer .image img {
  width: 100px;
  height: 100px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgb(51, 65, 87) !important;
}
</style>
